<template>
  <div>

    <!-- search -->
    <van-search placeholder="请输入项目名称或编号" v-model="keywords" @search="onSearch" ref="searchRef" />

    <!--dropdownmenu-->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>

    <!--projectInfo-->
    <div class="main" v-if="project_name">
      <ul>
        <li>
          <span>项目名称：{{project_name}}</span>
        </li>
        <li>
          <span>集团名称：{{clique_name}}</span>
        </li>
        <li>
          <span>申请人：{{applicant_name}}</span>
        </li>
      </ul>
      <div class="examine" @click="$router.push('/work_order')">
        <i class="iconfont icon-shenpi"></i>
        <p>审批</p>
      </div>
    </div>

  </div>
</template>

<script>
import { getApprovalAPI } from '@/api'
export default {
  name: 'SearchVue',
  data() {
    return {
      project_name: '',
      clique_name: '',
      applicant_name: '',
      keywords: '',
      value1: 0,
      value2: 'a',
      option1: [
        { text: '待(地市)复核', value: 0 },
      ],
      option2: [
        { text: '近一周', value: 'a' },
      ],
    };
  },
  methods: {
    onSearch() {
        console.log(this.$store);
      if (this.keywords != '') {
        this.getData();
      }

    },
    async getData() {
      const res = await getApprovalAPI(parseInt(this.keywords))
      if (res.data.code != '200') {
        this.$notify({ type: 'warning', message: '不存在' });
        this.$refs.searchRef.querySelector('input').focus()
        this.project_name = ''
        return;
      }
      console.log('111', res);
      this.project_name = res.data.data.project_name
      this.clique_name = res.data.data.clique_name
      this.applicant_name = res.data.data.applicant_name
      this.$store.commit('SET_PROJECT_ID',res.data.data.id)
      localStorage.setItem('project_id',res.data.data.id)
    },

  }
}
</script>


<style lang="less" scoped>
.main {
  position: relative;

  li {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-left: 20px;

    span {
      font-size: 13px;
      color: #414141;
    }
  }
  .examine {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 80px;
    height: 65px;
    /*border: 1px solid red;*/
    text-align: center;
    font-size: 15px;
    color: red;
    cursor: pointer;

    p {
      padding: 0;
      margin: 0;
    }

    .icon-shenpi {
      font-size: 32px;
    }
  }
}

/deep/ .van-search {
  margin: 5px 0;
}
</style>
